<template>
  <div>
    <Calendar
      :value="value"
      ref="calendar"
      :arrowLeft="arrowLeft"
      :tileContent="tileContent"
    />
    <!-- <div class="punch-count">
      <div class="punch-count-title">打卡统计</div>
      <div class="today-punch">今日打卡时间: {{goWorkTime}}</div>
      <div class="week-punch">本周打卡次数: 5</div>
      <div class="month-punch">本月打卡次数: 20</div>
    </div> -->
  </div>
</template>

<script>
import Calendar from 'mpvue-calendar'
import 'mpvue-calendar/src/style.css'

export default {
  data () {
    return {
      tileContent: [],
      // disabledArray: ['2018-6-27','2018-6-25'],
      // value: [2019,8,7],
      begin:[1990,1,1],
      end:[2220,1,1],
      // events: {'2019-8-7':'已打卡', '2019-8-18':'已打卡','2019-8-8':'已打卡','2019-8-10':'已打卡'},
      goWorkTime:'',
    }
  },
  components: {
    Calendar
  },
  onShow(){
    this.reqDakaStatus();
  },
  methods: {
    //获取上班打开信息
    async reqDakaStatus(){
      let userToken = wx.getStorageSync('userToken');
      let params = {
        user_token: userToken,
      }
      let res = await this.$api.getDakaStatus(params);
      if(res.data.level == "success"){
        this.WorkAddressShow = res.data.data.go_work_daka_info.address_detail;
        if(res.data.data.go_work == 1){
          this.goWorkTime = res.data.data.go_work_daka_info.created_at.split(' ')[1];
        }else{
           this.goWorkTime = '今日未打卡'
        }
        let calendar = res.data.data.user_daka_calendar;
        let arr = [];
        calendar.forEach((item,index)=>{
          let obj = {};
          let itemStr = '';
          let itemArr = item.split('-');
          if(itemArr[1] < 10){
            itemArr[1] = itemArr[1].replace('0','') //去掉日期中的0
          }
          if(itemArr[2] < 10){
            itemArr[2] = itemArr[2].replace('0','')
          }
          itemStr = itemArr.join('-');
          obj.date = itemStr;
          obj.className = 'holiday';
          arr.push(obj)
        })
        this.tileContent = arr;
      }else{
        wx.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 1000
        })
      }
    },
  }
}
</script>

<style lang="scss" scoped>
  .punch-count{
    padding: 0 30rpx;
    .punch-count-title{
      font-weight: bold;
      height: 80rpx;
      line-height: 80rpx;
    }
    .today-punch,
    .week-punch,
    .month-punch{
      color: #666666;
      height: 60rpx;
      line-height: 60rpx;
      font-size: 28rpx;
    }
    
  }
</style>

<style>
.holiday{
  background-color:rgb(0, 195, 255);
  border-radius: 10rpx;
  color: #fff;
}
</style>

